<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <!-- 搜索 -->
      <el-input placeholder="查询商家" v-model="input" class="addInput" clearable></el-input>

      <!-- 添加 -->
      <el-button type='primary' @click="search">查询</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" stripe>
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="name" label="商家名称"></el-table-column>
      <el-table-column prop="state" :formatter="stateFormat" label="商家状态"></el-table-column>
      <el-table-column prop="createDate" label="创建时间"></el-table-column>
      <el-table-column label="操作" width="150px">
        <template slot-scope="scope">
          <el-button size="mini" @click="findOne(scope.row)">查看</el-button>
          <el-button size="mini" type="danger" v-if="scope.row.state == 1" @click="startOrStop(scope.row)">禁用</el-button>
          <el-button size="mini" type="primary" v-if="scope.row.state == 0" @click="startOrStop(scope.row)">启用</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: 'BusinessList',
    data() {
      return {
        input: '',
        formLabelWidth:80,
        tableData: [{
            id:'001',
            name: '小二',
            state: 1,
            createDate: '2020-01-22',
          },
          {
            id:'002',
            name: 'zs',
            state: 1,
            createDate: '2020-01-22',
          },
          {
            id:'003',
            name: 'ls',
            state: 0,
            createDate: '2020-01-22',
          },
          {
            id:'004',
            name: 'ww',
            state: 1,
            createDate: '2020-01-22',
          },
          {
            id:'005',
            name: 'mm',
            state: 1,
            createDate: '2020-01-22',
          },
          {
            id:'006',
            name: 'zz',
            state: 0,
            createDate: '2020-01-22',
          },
        ],
        form: {}
      }
    },

    methods: {
      stateFormat(row, column) {
        if (row.state === 1) {
          return '正常状态'
        } else  {
          return '禁用状态'
        }
      },
      getTable() {
        return axios({
          // TODO 分页查询所有商家接口
          url:"/user/showall",
          method:'get',
        }).then(res=>{
          // 响应成功
          // 查询出来的当前页的商家列表
          this.tableData = res.data.data;
        },err=>{
          console.log("未响应....")
        })
      },


      search() {
        // 根据商家名查询
        if(this.input == '' || this.input == null || this.input == " "){
          this.getTable();
        }else{
          axios({
            // 根据商家名查询商家接口
            url:"/user/get/by/username",
            method:'get',
            params:{
              username:this.input
            }
          }).then(res=>{
            // 响应成功
            this.tableData = res.data.data;
            console.log(res)
          },err=>{
            console.log("未响应....")
            // console.log(err)
          })
        }
      },

      startOrStop(row) {
        axios({
          // TODO 启用或者禁用商家账号接口
          url:"/business/updateBusinessState/"+row.id,
          method:'get',
        }).then(res=>{
          // 响应成功
          if(row.state == 1){
            this.$notify({
              title: '禁用成功',
              message: '账号禁用成功',
              type: 'success'
            });
            row.state = 0;
          }else {
            this.$notify({
              title: '启用成功',
              message: '账号启用成功',
              type: 'success'
            });
            row.state = 1;
          }
        },err=>{
          // 响应失败
          if(row.state == 1){
            this.$notify({
              title: '禁用失败',
              message: '账号禁用失败',
              type: 'warning'
            });
          }else {
            this.$notify({
              title: '启用失败',
              message: '账号启用失败',
              type: 'warning'
            });
          }
        })
      },
      findOne(row){
        // TODO 跳往该商家商品列表
        this.$router.push({
            path: '/goods/list',
            query: {
              userId:row.id
            }
        })
      },
      handleSizeChange(val) {
        this.pageSize = val;
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val;
        console.log(`当前页: ${val}`);
        this.getTable();
      }

    },
    mounted() {
      console.log('BusinessList-mounted...');
      this.getTable();
    }
  }
</script>

<style>
  .header {
    width: 100%;
    display: flex;
  }

  .addInput {
    width: 90%;
    margin-right: 20px;
  }
</style>
